@charset "utf-8";
$font-size: 40;
@function r($px) {
  @return $px/(2*$font-size) * 1rem;
}

header {
  width: 100%;
  height: r(76);
  position: absolute;
  top: 0;
  border-bottom: 1px solid #a8a9a8;
  line-height: r(76);
  h4 {
    font-size: r(30);
    margin: r(22) auto 0;
    text-align: center;
    overflow: hidden;
  }
  a {
    .iconfont {
      float: left;
      margin-left: r(28);

      font-size: r(24);
      color: black;
    }
  }

}

section {
  position: absolute;
  top: r(76);
  bottom: 0;
  width: 100%;
  overflow-y: scroll;
  .ul_bottom {
    li {
      width:100%;
      height: r(100);
      line-height: r(100);
      text-indent: r(30);
      border-bottom: 1px solid rgb(229, 229, 229);
      font-size: r(24);
      .on-off {
        width: r(120);
        height: r(60);
        background: #000000;
        border-radius: r(30);
        margin-top: r(20);
        margin-right: r(29);
        border:r(2) solid #B2B2B2;
        position: relative;
        transition: all 200ms;
        button {
          width: r(62);
          height: r(62);
          border-radius: r(56);
          background: #FFFFFF;
          position: absolute;
          left: r(0);
          top: r(-3);
          border: r(1) solid #BBBBBB;
          transition: all 180ms;
        }
      }
      &.active{
        .on-off{
          background: #FFFFFF;

        }
        button{
          left:r(60);
        }
      }
    }
  }
  .item {
    cursor: pointer;
    height: r(100);
    width: 100%;
    border-bottom: 1px solid rgb(229, 229, 229);
    line-height: r(100);
    p {
      font-size: r(24);
      float: left;
      margin-left: r(30);
      a {
        font-size: r(24);
        color: black;
      }
    }
    a{
      i{
        margin-right: r(30);
        font-size: r(30);
        color: black;
      }
    }
  }
  #exit_acc {
    width: r(300);
    height: r(68);
    background: rgb(51, 51, 51);
    color: white;
    text-align: center;
    line-height: r(68);
    display: block;
    margin: r(30) auto r(250);
    border-radius: r(5);
    font-size: r(30);
  }
}